<template>
  <div class="admin-login">
    <div class="login-container">
      <div class="login-header">
               <van-nav-bar left-arrow @click-left="$router.back()" fixed placeholder />
        <div class="logo">
          <van-icon name="shield-o" size="40" color="#1989fa" />
        </div>
        <h1 class="login-title">管理员登录</h1>
        <p class="login-subtitle">请输入管理员账号和密码</p>
      </div>

      <div class="login-form">
        <van-form @submit="handleLogin">
          <van-field
            v-model="loginForm.useraccount"
            name="useraccount"
            label="账号"
            placeholder="请输入管理员账号"
            :rules="[{ required: true, message: '请输入管理员账号' }]"
            left-icon="manager-o"
            clearable
          />

          <van-field
            v-model="loginForm.userpassword"
            type="password"
            name="userpassword"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请输入密码' }]"
            left-icon="lock"
            clearable
          />

          <div class="login-options">
            <van-checkbox v-model="loginForm.remember">
              记住登录状态
            </van-checkbox>
          </div>

          <div class="login-button">
            <van-button
              round
              block
              type="primary"
              native-type="submit"
              :loading="loading"
              loading-text="登录中..."
            >
              登录
            </van-button>
          </div>
        </van-form>
      </div>

      <div class="login-footer">
        <p class="footer-text">
          <van-icon name="info-o" />
          仅限管理员使用，请妥善保管账号密码
        </p>
      </div>
    </div>

    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="bg-circle bg-circle-1"></div>
      <div class="bg-circle bg-circle-2"></div>
      <div class="bg-circle bg-circle-3"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import { setToken } from "@/utils/request.js";
import { adminLogin } from "@/api";

const router = useRouter();

// 表单数据
const loginForm = reactive({
  useraccount: "",
  userpassword: "",
  remember: false,
});

// 加载状态
const loading = ref(false);

// 处理登录
async function handleLogin() {
  if (!loginForm.useraccount || !loginForm.userpassword) {
    showToast("请填写完整的登录信息");
    return;
  }

  loading.value = true;

  try {
    const { useraccount, userpassword } = loginForm;
    const formData = { useraccount, userpassword };
    console.log(formData);

    // remember 单独提取（不和 username/password 放在同一个对象里）
    const remember = loginForm.remember;
    const response = await adminLogin(formData);
    console.log(response);

    if (response.data && response.data.token) {
      // 保存token
      setToken(response.data.token, loginForm.remember);

      showToast("登录成功");

      // 跳转到管理后台
      router.push("/admin/dashboard");
    } else {
      throw new Error(response.message || "登录失败");
    }
  } catch (error) {
    console.error("登录失败:", error);

    // 模拟登录成功（用于演示）
    // if (loginForm.username === "admin" && loginForm.password === "admin123") {
    //   const mockToken = "mock-admin-token-" + Date.now();
    //   setToken(mockToken, loginForm.remember);
    //   showToast("登录成功（演示模式）");
    //   router.push("/admin/dashboard");
    // } else {
    //   showToast("用户名或密码错误");
    // }
  } finally {
    loading.value = false;
  }
}
</script>

<style lang="scss" scoped>
.admin-login {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.login-container {
  background: white;
  border-radius: 20px;
  padding: 40px 30px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;

  .logo {
    margin-bottom: 20px;
  }

  .login-title {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
  }

  .login-subtitle {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
  }
}

.login-form {
  .van-field {
    margin-bottom: 16px;
    border-radius: 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;

    &:focus-within {
      border-color: #1989fa;
      box-shadow: 0 0 0 2px rgba(25, 137, 250, 0.1);
    }
  }

  .login-options {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .van-checkbox {
      font-size: 14px;
      color: #666;
    }
  }

  .login-button {
    margin-top: 30px;

    .van-button {
      height: 50px;
      font-size: 16px;
      font-weight: 500;
      background: linear-gradient(135deg, #1989fa 0%, #1976d2 100%);
      border: none;
      box-shadow: 0 4px 12px rgba(25, 137, 250, 0.3);

      &:active {
        transform: translateY(1px);
      }
    }
  }
}

.login-footer {
  margin-top: 30px;
  text-align: center;

  .footer-text {
    margin: 0;
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
}

// 背景装饰
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;

  &.bg-circle-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: -50px;
    animation-delay: 0s;
  }

  &.bg-circle-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: -30px;
    animation-delay: 2s;
  }

  &.bg-circle-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .admin-login {
    padding: 16px;
  }

  .login-container {
    padding: 30px 20px;
    border-radius: 16px;
  }

  .login-header {
    margin-bottom: 30px;

    .login-title {
      font-size: 20px;
    }

    .login-subtitle {
      font-size: 13px;
    }
  }

  .login-form {
    .login-button .van-button {
      height: 45px;
      font-size: 15px;
    }
  }

  .bg-circle {
    &.bg-circle-1 {
      width: 150px;
      height: 150px;
    }

    &.bg-circle-2 {
      width: 100px;
      height: 100px;
    }

    &.bg-circle-3 {
      width: 80px;
      height: 80px;
    }
  }
}
</style>
